<template>
  <view class="box">
    <view class="swiper" v-if="swiperList.length">
      <uv-swiper :list="swiperList" keyName='image' bgColor='rgba(0,0,0,0)' indicator indicatorMode='dot' indicatorStyle='bottom: 20rpx' indicatorInactiveColor='#FFFFFF' @click='swiperChange'></uv-swiper>
    </view>
    <view class="gost">
      <view class="item" :class="{ active: current == 0 }" @click="current = 0">
        <image src="@/static/ke1.png" class="ke1 ke" v-if="current == 0"></image>
        <image src="@/static/ke1-1.png" class="ke1 ke" v-else></image>
        <view class="font">课程</view>
      </view>
      <view class="item" :class="{ active: current == 1 }" @click="current = 1">
        <image src="@/static/ke2.png" class="ke2 ke" v-if='current == 1'></image>
        <image src="@/static/ke2-1.png" class="ke2 ke" v-else></image>
        <view class="font">直播</view>
      </view>
    </view>
    <template v-if="current == 0">
      <subject ref="subJect"></subject>
    </template>
    <template v-else>
      <live></live>
    </template>
  </view>
</template>

<script setup>
import subject from './subject.vue';
import live from './live.vue';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { get } from '@/api';
import { setUrl } from '@/common';

const subJect = ref(null);
let swiperList = ref([]);
let current = ref(0);

onLoad(() => {
  getBanner();
})

function init(){
  subJect.value.init();
}
function getBanner(){
  get('/api/lesson/getIndexBanner').then(res => {
    if(res.code == 1){
      const data = res.data;
      data.forEach(e => {
        e.jump_url = setUrl(e.jump_url);
      })
      swiperList.value = data;
    }
  })
}
function swiperChange(index){
  const obj = swiperList.value[index];
  if(obj){
    const type = obj.jump_type;
    if(type == 1) return;
    if(type == 3){
      uni.navigateTo({
        url: obj.jump_url
      });
      return;
    }
    if(type == 2){
      uni.setStorageSync('WEBURL', obj.jump_url);
      uni.navigateTo({
        url: '/pages/view'
      });
    }
  }
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
  .box{
    position: relative;
    z-index: 2;
    
    .gost{
      width: 100%;
      padding: 0 30rpx;
      padding-top: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item{
        width: 48%;
        height: 72rpx;
        line-height: 72rpx;
        background-image: linear-gradient(90deg, rgba($color: #FF312E, $alpha: 0.18) 0%, rgba($color: #FF7E7A, $alpha: 0.18) 100%);
        border-radius: 15rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        &.active{
          background-image: linear-gradient(90deg, rgba($color: #FF312E, $alpha: 1) 0%, rgba($color: #FF7E7A, $alpha: 1) 100%);
          .font{
            color: #FFFFFF;
          }
        }
        .ke1{
          width: 35rpx;
          height: 31rpx;
        }
        .ke2{
          width: 31rpx;
          height: 28rpx;
        }
        .ke{
          font-size: 0;
        }
        .font{
          font-weight: 500;
          font-size: 28rpx;
          color: #FF8484;
          padding-left: 20rpx;
        }
      }
    }
    .swiper{
      padding: 0 30rpx;
      border-radius: 20rpx;
      overflow: hidden;
    }
  }
</style>